<template>
    <div class="question-cell">
        <div class='title'>
            {{index}}.{{title}}
        </div>
        <div class='content'>
            <mt-field placeholder="请输入您的回复内容..."
                      v-model="answer"
                      class="input"
                      @blur="reset"></mt-field>
        </div>
    </div>
</template>

<script>
import { Field } from "mint-ui";
export default {
    name: "Question",
    components: {
        "mt-field": Field
    },
    props: {
        index: Number,
        title: String,
        value: String
    },
    methods: {
        reset() {
            window.scroll(0, 0);
        }
    },
    data() {
        return {
            answer: ""
        };
    },
    watch: {
        answer: function(val) {
            this.$emit("input", val);
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.question-cell {
    padding: 50px 40px 0;
}
.question-cell > .title {
    font-size: 34px;
}
.question-cell > .content {
    margin-top: 20px;
    position: relative;
}

.question-cell > .content > .input {
    width: calc(100% - 40px);

    input {
        background-color: #f6f6f6;
        border: none;
        border-radius: 6px;
        height: 80px;
        padding: 0 20px;
        font-size: 28px;
        width: calc(100% - 40px);
    }
}
</style>
